<template>
  <div class="section-container">
    <div
      class="title"
      :style="{
        paddingLeft: p + 'vw',
        paddingRight: p + 'vw',
      }"
    >
      {{ title }}
    </div>
    <Layout :vertical-padding="30" background="#f5f5fc" :p="p">
      <template #left>
        <slot name="left"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </Layout>
  </div>
</template>

<script>
import Layout from "../IndexComps/Layout.vue";
export default {
  components: {
    Layout,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    p: {
      default: 6,
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
</style>
